<template>
  <el-form ref="tDrugs" :model="tDrugs" style="padding-top: 20px;padding-left: 20px" label-width="80px">
    <el-form-item required="true" label="商标名称">
      <el-col :span="11">
        <el-input v-model="tDrugs.fullName"></el-input>
      </el-col>
    </el-form-item>

    <el-form-item required="true" label="药品类型">
      <el-select v-model="tDrugs.drugType" placeholder="请选择药品类型">
        <el-option v-for="dict in drugTypeOptions"
                   :key="dict.dictValue"
                   :label="dict.dictLabel"
                   :value="dict.dictValue"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="通用名称" required="true">
      <el-col :span="11">
        <el-input v-model="tDrugs.shorterName"></el-input>
      </el-col>
    </el-form-item>
    <el-form-item label="规       格">
      <el-col :span="11">
        <el-input v-model="tDrugs.specs"></el-input>
      </el-col>
    </el-form-item>
    <el-form-item label="适  应 症">
      <el-col :span="11">
        <el-input v-model="tDrugs.adapt"></el-input>
      </el-col>
    </el-form-item>
    <el-form-item label="特      点">
      <el-col :span="11">
        <el-input v-model="tDrugs.trait"></el-input>
      </el-col>
    </el-form-item>
    <el-form-item label="价      格" required="true">
      <el-col :span="11">
        <el-input type="number" v-model="tDrugs.price"></el-input>
      </el-col>
    </el-form-item>
    <el-form-item label="是否自营">
      <el-select v-model="tDrugs.isSelf" placeholder="请选择">
        <el-option
          v-for="item in isSelfOptions"
          :key="item.id"
          :label="item.value"
          :value="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <div>

    </div>
    <el-form-item label="上传图片">
      <el-upload
        action=""
        :on-preview="handlePictureCardPreview"
        :on-success="handleSuccess"
        :before-upload="handleBefore"
        :show-file-list="false"
        :on-remove="handleRemove">
        <i class="upload-demo"></i>
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <div v-show="openImg">
        <img style="height:200px;width: 200px" :src="dialogImageUrl"/>
      </div>
    </el-form-item>
    <div class="app-container">
      产品详情
      <mavon-editor ref="md" v-model="drugsInfo" :style="'height:' + height" @imgAdd="imgAdd"/>
    </div>
    <el-form-item>
      <el-button type="primary" @click="submitForm">立即添加</el-button>
      <el-button @click="closeAdd">取消</el-button>
    </el-form-item>
  </el-form>


</template>

<script>
  import { addDrugs, getDrugs, updateDrugs } from '@/api/drugs'
  import { uploadImg } from '@/api/system/user'

  export default {
    name: 'drugsAdd',
    data() {
      return {
        height: document.documentElement.clientHeight - 200 + 'px',
        dialogImageUrl: '',
        dialogVisible: false,
        openImg: false,
        drugsInfo: '',
        tDrugs: {
          id: '',
          fullName: '',
          shorterame: '',
          pimage: '',
          specs: '',
          adapt: '',
          trait: '',
          price: '',
          productInfo: '',
          isSelf: '1',
          drugType: '1'
        },
        drugTypeOptions: [],
        isSelfOptions: [
          {
            id: '1',
            value: '自营'
          },
          {
            id: '2',
            value: '非自营'
          }
        ]
      }
    },

    created() {
      this.getDicts('drug_type').then(response => {
        this.drugTypeOptions = response.data
      })
    },
    mounted() {
      let id = this.$route.query.id
      if (id != '' && id != undefined) {
        this.getdrugsById(id)
      }
    },
    methods: {
      handleRemove(file, fileList) {

      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      handleSuccess(response, file, fileList) {
        this.dialogImageUrl = file.url
      },
      handleBefore(file) {
        let formData = new FormData()
        formData.append('avatarfile', file)
        uploadImg(formData).then((response) => {
          if (response.code === 200) {
            this.openImg = true
            this.dialogImageUrl = process.env.VUE_APP_BASE_API + response.imgUrl
            this.msgSuccess('上传成功')
          } else {
            this.msgError(response.msg)
          }

        })

      },
      /** 提交按钮 */
      submitForm: function() {
        this.tDrugs.pimage = this.dialogImageUrl
        this.tDrugs.productInfo = this.$refs.md.d_render
        this.tDrugs.content = this.$refs.md.d_value

        if (this.tDrugs.fullame == '') {
          this.msgSuccess('请输入商标名称')
          return
        }
        if (this.tDrugs.shorterName == '') {
          this.msgSuccess('请输入药品名称')
          return
        }
        if (this.tDrugs.specs == '') {
          this.msgSuccess('请输入规格')
          return
        }

        if (this.tDrugs.price == '') {
          this.msgSuccess('请输入价格')
          return
        }
        if (this.tDrugs.id != '') {
          updateDrugs(this.tDrugs).then(response => {
            if (response.code === 200) {
              this.msgSuccess('修改成功')
              this.$router.push('/drugs/drugsQuery')
            } else {
              this.msgError(response.msg)
            }
          })
        } else {
          addDrugs(this.tDrugs).then(response => {
            if (response.code === 200) {
              this.msgSuccess('新增成功')
              this.$router.push('/drugs/drugsQuery')
            } else {
              this.msgError(response.msg)
            }
          })
        }

      },
      imgAdd(pos, $file) {
        let formData = new FormData()
        formData.append('avatarfile', $file)
        uploadImg(formData).then(data => {
          this.$refs.md.$img2Url(pos, process.env.VUE_APP_BASE_API + data.imgUrl)

        })
      },
      closeAdd() {
        this.$router.push('/drugs/drugsQuery')
      },
      onSubmit() {
        //console.log(this.tDrugs);
      },
      //获取药品信息
      getdrugsById(id) {
        getDrugs(id).then(response => {
          this.tDrugs = response.data
          this.openImg = true
          this.dialogImageUrl = response.data.pimage
          this.$refs.md.d_render = response.data.productInfo
          if (response.data.content == '' || response.data.content == null) {
            this.drugsInfo = this.$refs.md.d_render
          } else {
            this.$refs.md.d_value = response.data.content
          }
        })
      }
    }
  }
</script>

<style scoped>
</style>
